<template>
      <div class="bg_f">
        <div class="wp_head flex flex-between">
          <span>任务信息</span>
          <button type="primary" @click="addTak" class="tak_btn">任务</button>
        </div>
        <table class="good_list" style="">
          <tr class="flex flex-between">
            <th>标题</th>
            <th>金额</th>
            <!-- <th>重量(KG)</th> -->
            <th v-if="!type">操作</th>
          </tr>
          <tr v-if="realList&&realList.length>0" v-for="(g,index) in realList" :key="index" class="flex flex-between">
            <td >
              <p class="ellipsis title">{{g.title}}</p>
            </td>
            <td>
              <p v-if="g.amount>0">
                {{g.type==1?'+':'-'}}{{g.amount}}
              </p>
               <p v-else>
                 无
              </p>
            </td>
             <td @click="cofirmTak(g,index)" class="flex flex-center">

              <!-- <button></button> -->
                 <p  class="staus_btn" :class="g.status==2?'staus_btn2':''">{{g.statusName}}</p>
            </td>
          </tr>
          <tr v-if="realList&&realList.length==0">
              请添加任务
          </tr>
      </table>

    </div>
</template>

<script>
import enumStatus from "@/utils/enum";
import api from "@/utils/api";


export default {
  props:{
    taskList:Array,
  },
  methods:{
    addTak(){
        this.$store.dispatch("setModal", true);
      //
    },
    cofirmTak(data,index){
      if(data.status!=2)return;
      let option={
        id:data.id
      }
      api.taskConfirm(option).then(res=>{
        console.log('确认任务',res)
        if(res&&res.code==0){
          this.taskList[index].status+=1
          this.toastSuccess(res.msg)
        }else{
          this.toastError(res.msg)

        }
      }).catch(err=>{
        this.toastError('网络繁忙！')
      })
    }
  },
  computed: {
    realList(){
    let rl=this.taskList
    if(rl&&rl.length>0){
      rl=rl.map(item=>{
        enumStatus.takeStatus.forEach(d => {
          if(d.status==item.status){
            item.statusName=d.name
          }

        });
        return item
      })
    }
    // rl.array.forEach(element => {

    // });

    return rl
    }

  }
}
</script>

<style scoped>
.bg_f {
  background-color: #fff;
  padding: 15px;
}

.bg_f .wp_head {
  padding-bottom: 10px;
  font-size: 16px;
}
.good_list {
  text-align: center;
  border-collapse:collapse;
  word-wrap:break-word;
  word-break:break-all;
}
.good_list tr td,
.good_list tr th {
  width: 50%;
  text-align: center;
  border: 1px solid #eee;
  height: 35px;;
  line-height: 35px;
}
.good_list tr{
  border: 1px solid #eee;
    height: 35px;;
  line-height: 35px;
}
.good_list tr td{
  font-size: 14px;
}
.tak_btn {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  margin: 0;
}
.good_list tr td p.staus_btn{
  height: 30px;
  width: 60px;
  line-height: 30px;;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #999;
  color: #fff;
}
.good_list tr td p.staus_btn2{
  background-color: #1AAD19;
  color: #fff;
}
</style>
